<template>
  <div class="progress-circle">
    <svg :width="size" :height="size" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <circle class='progress-background' cx="50" cy="50" r="50" fill="transparent"/>
   <!-- 这里的stroke-dasharray 保证为一个周长 -->
   <circle class='progress-bar' cx="50" cy="50" r="50" fill="transparent" :stroke-dasharray='dasharray' :stroke-dashoffset='offset'/>
</svg>
<slot></slot>
  </div>
</template>
<script>
export default {
  name: 'progress-circle',
  props: {
    size: {
      type: Number,
      default: 32,
    },
    percent: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      dasharray: Math.PI * 100,
    };
  },
  computed: {
    offset() {
      return this.percent * this.dasharray;
    },
  },
};
</script>
<style lang='stylus' scoped>
  @import "~styl/var"

  .progress-circle
    position: relative
    circle
      stroke-width 8px
      transform-origin center
      &.progress-background
        transform scale(0.9)
        stroke $color-theme
      &.progress-bar
        transform scale(0.9) rotate(-90deg) scaleY(-1)
        stroke black
</style>
